<template>
  <span class="controller" :class="{ disabled }" >
    <el-button class="controller-button" size="mini" circle @click="handleClick">
      <slot name="yes" v-if="available"><i class="iconfont icon-some"></i></slot>
      <slot name="no" v-else><i class="iconfont icon-ban"></i></slot>
    </el-button>
    <div class="slider-container">
      <el-slider
        class="controller-slider"
        height="100px"
        vertical
        v-model="value"
        :min="min"
        :max="max"
        @change="handleChange"
      >
      </el-slider>
    </div>
  </span>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    defaltValue: {
      type: Number,
      default: 100
    },
    allowDisable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    let defaltValue = this.defaltValue;

    return {
      value: defaltValue,
      disabled: false,
      cacheValue: defaltValue
    };
  },
  computed: {
    computedValue () {
      return this.disabled ? 0 : this.value;
    },
    available () {
      return !this.disabled && this.value;
    }
  },
  methods: {
    handleClick () {
      this.disabled = !this.disabled;

      if (this.disabled) {
        this.emitChangeEvent(0);
      } else {
        this.emitChangeEvent(this.value);
      }
    },
    handleChange (value) {
      this.emitChangeEvent(value);
    },
    emitChangeEvent (value) {
      this.$emit('change', value);
    }
  }
};
</script>

<style lang="scss">
  .controller {
    display: inline-block;
    position: relative;
    .slider-container {
      position: absolute;
      bottom: 105%;
      display: none;
      padding: 6px 0;
      background-color: rgba(0,0,0,0.7);

      .controller-slider {
        .el-slider__runway {
          margin: 0 14px;
          /* padding: 0 16px; */
          width: 2px;
          /* background: rgba(0, 0, 0, 0.7); */

          .el-slider__bar {
            width: 2px;
          }

          .el-slider__button-wrapper {
            /* width: 10px;
            height: 10px; */
            left: -17px;

            .el-slider__button {
              width: 6px;
              height: 6px;
            }
          }
        }
      }
    }

    .controller-button {
      color: #FFF;
      background-color: rgba(0,0,0,0.1);
      border-color: rgba(0,0,0,0.1);

      &:hover {
        background-color: rgba(0,0,0,0.2);
      }

      &:active{
        background-color: rgba(0,0,0,0.25);
      }
    }

    &:hover:not(.disabled) {
      .slider-container {
        display: block;
      }
    }

    &.disabled {
      .controller-button {
        color: #000;
        background-color: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.8);

        &:hover {
          background-color: rgba(255, 255, 255, 0.7);
        }

        &:active{
          background-color: rgba(255, 255, 255, 0.75);
        }
      }
    }
  }

</style>
